<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 最简单的html标签+js  百度功能  抖动 -->
    <input type="text" name="" id="undebounce" autofocus placeholder="请输入您要的搜索内容">
    <!-- placeholder规定可描述输入字段预期值的简短的提示信息 -->
    <button id="cancel">取消搜索事件绑定</button>
    <button id="btn">btn</button>
    <script>
        window.onload = function () {
            /* 
             * @param {string} file 文件名
             * @returns {boolean} 是否是图片
             * @author Cavan 作者
             * @date 2020-4-12
             */
            const input = document.querySelector('#undebounce');
            const cancel = document.getElementById('cancel');
            const btn = document.getElementById('btn');

            // 取消事件监听 必须传 事件类型 和 当初绑定的事件处理函数(具名函数)
            var btn1 = () => { console.log('1'); };//箭头函数内容不是return 所以要加{}
            var btn2 = () => { console.log('2'); };
            var btn3 = () => { console.log('3'); };
            btn.addEventListener('click', btn1);
            btn.addEventListener('click', btn2);
            btn.addEventListener('click', btn3);
            btn.removeEventListener("click", btn3);

            // input.addEventListener('input', function () {
            //     let keyword = this.value;
            //     console.log(keyword);
            // })
            function doInput() {
                let keyword = event.target.value;
                // 搜索功能比较复杂,应该放在外面---流程性代码,能封装就封装!
                ajax(keyword);
            }

            function ajax(content) {
                console.log('准备实时搜索' + content);
            }

            input.addEventListener('input', doInput)

            input.addEventListener('keydown', function (event) {
                if (event.keyCode == 13) {
                    console.log('搜索吧');
                }
            })

            cancel.addEventListener('click', function () {
                input.removeEventListener('input', doInput);
            })
        }
    </script>
</body>

</html>